<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style type="text/css" media="screen">
	#_tab {
		margin:0px auto; /* Right and left margin widths set to "auto" */
		text-align:left; /* Counteract to IE5/Win Hack */
		padding:15px;
	}
	
	h1 {
		color: #333;
		font: 1.8em/1 Georgia, "Times New Roman", Times, serif;
		font-weight: 900;
		font-style: italic;
		margin-bottom: 25px;
	}
</style>

<script type='text/javascript'>
	$(document).ready(function () {
		var _chords = $('._chord');
		
		var _strong = null;
		var _chord = null;
		for (var i = 0 ; i < _chords.length ; i++) {
			_strong = $("<strong>"); 
			_chord = $(_chords[i]).attr('chord');
			_strong.text(_chord);
			$('body').append(_strong);
			_strong.css({
				'color' : 'green',
				'position' : 'absolute',
				'top' : $(_chords[i]).offset().top - _strong.height(),
				'left' : $(_chords[i]).offset().left,
				'fontStyle' : 'italic',
				'cursor' : 'pointer'
			});
		}
		
		var showTab = function (_chord) {
			
		};
	});
</script>
</head>
<body>
<h1>가을방학</h1>

<div id='_tab' >
	<%=request.getAttribute("tabContent")%>
</div>

</body>
</html>